// Created by Joe on 2017/6/14.

/**
 * date: {
 *  title: { start<String>, end<String> },
 *  display: { start<String>, end<String> }
 *  }
 * start: boolean
 * panel: { show<boolean> }
 */

app.directive(
    'dateSetting',
    [
        'KEY',
        function (KEY) {
            return {
                restrict: 'E',
                scope: {
                    date: '=',
                    start: '=',
                    panel: '='
                },
                template: '<div>' +
                '<div class="date__mask"></div>' +
                '<div class="date__setting">' +
                '<p class="ds__title">{{title}}</p>' +
                '<div class="ds__content">' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data-sp">年</span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data-sp">月</span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data"></span>' +
                '<span class="ds__data-sp">日</span>' +
                '</div>' +
                '<p class="ds__ok">确定</p>' +
                '</div></div>',
                link: function (scope, ele, attr) {
                    // set num-key env
                    scope.env = attr.env || 'stb';

                    // date container
                    // stb not support
                    // scope.container = Array.apply(null, {length: 8}).map(function () {
                    //     return 0;
                    // });
                    scope.container = [0, 0, 0, 0, 0, 0, 0, 0];

                    // selector handler
                    scope.selector = {
                        $data: ele.find('.ds__data'),
                        $ok: ele.find('.ds__ok')
                    };

                    // set focus
                    scope.focus = {
                        row: 0, col: 0, limit: 8
                    };

                    // kb num
                    scope.numKey = {
                        start: scope.env === 'stb' ? KEY.NUM0 : 48,
                        end: scope.env === 'stb' ? KEY.NUM9 : 57
                    };

                    // data communicate
                    scope.date = scope.date || {title: {start: '主题', end: '主题'}};
                    scope.title = scope.start ? scope.date.title.start : scope.date.title.end;
                    scope.display = scope.date.display || {};

                    // init
                    scope.selector.$data.eq(0).addClass('ds__data--focus');

                    // add action
                    var moveHandler = function () {
                        if (event.keyCode === KEY.UP) {
                            if (scope.focus.row === 1) {
                                scope.focus.row = 0;
                                scope.selector.$ok.removeClass('ds__ok--focus');
                                scope.selector.$data.eq(scope.focus.col).addClass('ds__data--focus');
                            }
                        }
                        if (event.keyCode === KEY.DOWN) {
                            if (scope.focus.row === 0) {
                                scope.focus.row = 1;
                                scope.selector.$ok.addClass('ds__ok--focus');
                                scope.selector.$data.eq(scope.focus.col).removeClass('ds__data--focus');
                            }
                        }
                        if (event.keyCode === KEY.LEFT && scope.focus.col > 0) {
                            scope.selector.$data
                                .eq(scope.focus.col--)
                                .removeClass('ds__data--focus');
                            scope.selector.$data
                                .eq(scope.focus.col)
                                .addClass('ds__data--focus');
                        }
                        if (event.keyCode === KEY.RIGHT && scope.focus.col < scope.focus.limit - 1) {
                            scope.selector.$data
                                .eq(scope.focus.col++)
                                .removeClass('ds__data--focus');
                            scope.selector.$data
                                .eq(scope.focus.col)
                                .addClass('ds__data--focus');
                        }
                        if (event.keyCode >= scope.numKey.start && event.keyCode <= scope.numKey.end) {
                            if (scope.focus.row === 0) {
                                var num = event.keyCode - scope.numKey.start;
                                scope.selector.$data
                                    .eq(scope.focus.col)
                                    .text(num);
                                scope.container[scope.focus.col] = num;
                                if (scope.focus.col < scope.focus.limit - 1) {
                                    scope.selector.$data
                                        .eq(scope.focus.col++)
                                        .removeClass('ds__data--focus');
                                    scope.selector.$data
                                        .eq(scope.focus.col)
                                        .addClass('ds__data--focus');
                                }
                            }
                        }
                        if (event.keyCode === KEY.ENTER) {
                            // TODO : add date check after demo
                            if (scope.focus.row === 1) {
                                var year = scope.container.slice(0, 4).join('');
                                var month = scope.container.slice(4, 6).join('');
                                var day = scope.container.slice(6, 8).join('');
                                scope.$apply(function () {
                                    scope.display[scope.start ? 'start' : 'end'] = [year, month, day].join('-');
                                    scope.panel.show = false;
                                });
                            }

                        }
                    };

                    document.addEventListener('keydown', moveHandler);

                    ele.on('$destroy', function () {
                        document.removeEventListener('keydown', moveHandler);
                    });
                }
            };
        }
    ]
);